<template>
<div>
  <el-dialog
    :title="title"
    :fullscreen=true
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="OnClose">
    <el-row :gutter="10">
      <el-col :span="15">
        <el-card  shadow="never" :body-style="contentViewHeight" class="uni-map-panel">
          <PointAddList ref="pointAddList" :floorId='inputForm.floor.id' type="mesh" url='/smis/mesh/jfMeshList/list' nameKey='name' @onMapClick="onMapClick" @onDataClick="onDataClick" @dbClick="doSubmit()"></PointAddList>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card  shadow="never" :body-style="contentViewHeight" class="uni-data-panel">
          <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
                   label-width="120px">
            <el-row  :gutter="15">
              <el-col :span="22">
                  <el-form-item label="模型类型" prop="group.id"
                      :rules="[
                       ]">
                   <GridSelect
                     title="选择模型"
                     labelName = 'name'
                     labelValue = 'id'
                     :value = "inputForm.group.id"
                     :limit="1"
                     @getValue='(value) => {inputForm.group.id=value}'
                     :columns="[
                     {
                       prop: 'name',
                       label: '名称'
                     }
                     ]"
                     :searchs="[
                     {
                       prop: 'name',
                       label: '名称'
                     }
                     ]"
                     dataListUrl="/smis/mesh/jfMeshGroup/list"
                     entityBeanName="jfMeshGroup"
                     queryEntityUrl="/smis/mesh/jfMeshGroup/queryById">
                   </GridSelect>
                 </el-form-item>
              </el-col>
              <el-col :span="22">
                  <el-form-item label="模型名称" prop="name"
                      :rules="[
                        {required: true, message:'开始编号不能为空', trigger:'blur'}
                       ]">
                    <el-input v-model="inputForm.name" placeholder="请填写模型名称"     ></el-input>
                    <el-checkbox v-model="autoUp" style="position: absolute; right: 5px; ">自增</el-checkbox>
                 </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="Z轴" prop="z" :rules="[
                      {required: true, message:'Z轴不能为空', trigger:'blur'}
                     ]">
                  <el-input v-model="inputForm.z" placeholder="请填写Z轴"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="尺寸" prop="size" :rules="[
                     ]">
                  <el-input v-model="inputForm.size" placeholder="请填写尺寸"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="角度" prop="angle" :rules="[
                     ]">
                  <el-input v-model="inputForm.angle" placeholder="请填写角度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                   <el-form-item label="x" prop="x"
                       :rules="[
                         {required: true, message:'x不能为空', trigger:'blur'}
                        ]">
                     <el-input v-model="inputForm.x" placeholder="请填写x"     ></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="22">
                   <el-form-item label="y" prop="y"
                       :rules="[
                         {required: true, message:'y不能为空', trigger:'blur'}
                        ]">
                     <el-input v-model="inputForm.y" placeholder="请填写y"     ></el-input>
                  </el-form-item>
               </el-col>
			   <el-col :span="22">
			       <el-form-item label="z" prop="z"
			           :rules="[
			             {required: true, message:'z不能为空', trigger:'blur'}
			            ]">
			         <el-input v-model="inputForm.y" placeholder="请填写z"     ></el-input>
			      </el-form-item>
			   </el-col>
            </el-row>
          </el-form>
          <el-button type="primary"  @click="doSubmit()" v-noMoreClick>添加(双击选中并提交)</el-button>

          <div class="uni-addlist-delete" v-if="selectItem.id !== ''">
            <div>当前选中了{{selectItem.name}}</div>
            <el-button type="danger" size="small" @click="doDelete()" v-noMoreClick>删除</el-button>
          </div>
          <div class="uni-foot">
            <el-button type="text"  @click="doUpdate()" v-noMoreClick>更新点位模型名称</el-button>
            <el-popover placement="top" width="240" trigger="hover">
              <div class="uni-popover-notice">可用通过<span>x、y坐标</span>,自动计算并保存<span>模型名称</span></div>
              <i slot="reference" class="el-icon-question" ></i>
            </el-popover>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>
</div>
</template>

<script>
  import PointAddList from '@/components/jfMap/pointAddList.vue'
  import GridSelect from '@/components/gridSelect'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        autoUp: false,
        selectItem: {
          id: '',
          name: ''
        },
        inputForm: {
          id: '',
          group: {
            id: ''
          },
          name: '',
          floor: {
            id: ''
          },
          x: '',
          y: '',
          z: '',
          size: '',
          angle: ''
        }
      }
    },
    components: {
      PointAddList,
      GridSelect
    },
    computed: {
      contentViewHeight () {
        let height = this.$store.state.common.documentClientHeight - 152
        return {height: height + 'px'}
      }
    },
    methods: {
      init (method, id, floorId) {
        this.method = method
        this.inputForm.id = id
        this.title = `批量添加`
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
			this.inputForm.floor.id = floorId
			this.resetFields()
			this.$refs.pointAddList.resize();
			this.$refs.pointAddList.showFloor(floorId);
        })
      },
      resetFields(){
        this.inputForm.id = ''
        this.inputForm.name = this.autoUp ? this.getAutoUpNumber( this.inputForm.name) : ''
        this.inputForm.x = ''
        this.inputForm.y = ''
		this.inputForm.z = ''
      },
      getAutoUpNumber(code)  {
        if(!code || code === "") {
          return ""
        }
        var list = code.split("")
        var numCode = ''
        for(var i= list.length-1; i>=0; i--) {
        	var isnum = /^\d+$/.test(list[i]);
        	if(isnum) {
        		numCode = list[i]+numCode
        	} else {
        		break
        	}
        }
        if(numCode === '') {
        	return code
        }
        var prefix = code.substr(0, code.length - numCode.length)
        var newCode = (parseInt(numCode)+1)+''
        for(var len =newCode.length, i=0; i<numCode.length-len; i++) {
        	newCode = '0'+newCode
        }
        return prefix+newCode
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/smis/mesh/jfMeshList/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.$message.success(data.msg)
                this.$refs.pointAddList.refreshList()
                this.resetFields()
              }
              this.loading = false
            })
          }
        })
      },
      // 更新当前所有数据的模型名称
      doUpdate() {
        this.loading = true
        this.$http({
          url: '/smis/mesh/jfMeshList/list',
          method: 'get',
          params: {
            'pageNo': 1,
            'pageSize': 100000,
            'orderBy': '',
            'floor': {
              id: this.inputForm.floor.id
            }
          }
        }).then(({data}) => {
          if (data && data.success) {
            var dataList = data.page.list
            this.updateData(dataList)
          }
          this.loading = false
        })
      },
      updateData (dataList) {
        if(dataList.length === 0) {
          this.loading = false
          this.$message.success("处理完成")
          return
        }
        var item = dataList.shift();
        this.loading = true
        this.inputForm = item
        this.inputForm.meshName = this.$refs.pointAddList.findGroupName(item)
        this.$http({
          url: `/smis/mesh/jfMeshList/save`,
          method: 'post',
          data: this.inputForm
        }).then(({data}) => {
          this.updateData(dataList);
          this.loading = false
        })
      },
      doDelete () {
        this.loading = true
        this.$http({
          url: '/smis/mesh/jfMeshList/delete',
          method: 'delete',
          params: {'ids': this.selectItem.id}
        }).then(({data}) => {
          if (data && data.success) {
            this.$message.success(data.msg)
            this.$refs.pointAddList.refreshList()
            this.selectItem = {
              id: '',
              name: ''
            }
          }
          this.loading = false
        })
      },
      onMapClick (e) {
        this.inputForm.x = e.x
        this.inputForm.y = e.y
		this.inputForm.z = e.z
      },
      onDataClick (e) {
        this.selectItem = e
      },
      OnClose (){
        this.$emit('refreshDataList')
      }
    }
  }
</script>
<style scoped="scoped">
  .uni-foot {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 60px;
    text-align: right;
    padding: 0 10px;
    color: #096DD9;
  }
  .uni-foot .el-button--text {
    color: #096DD9;
    font-size: 12px;
  }
  .uni-popover-notice {
    font-size: 12px;

    span {
      color: #F5222D;
    }
  }
</style>
